<template>
    <section class="main-content">
        <aside class="main-aside">
            <Nav :nav="nav" />
        </aside>

        <section class="main-content">
            <main class="markdown-body">
                <RouterView />
            </main>
        </section>
    </section>
</template>

<script>
import Nav from './Nav';

import 'github-markdown-css/github-markdown.css';

export default {
    name: 'App',

    components: {
        Nav,
    },

    props: {
        nav: {
            type: Array,
            default: () => [],
        },
    },

};
</script>

<style lang="scss">
.main-content {
    display: flex;

    .main-aside {

        overflow-y: auto;

        position: fixed;
        top: 80px;
        bottom: 0;
        z-index: 100;

        width: 220px;
    }

    .main-content {
        margin-left: 220px;
        padding: 15px 35px 35px 35px;
    }

    table {
        margin-bottom: 24px;
        border: 1px solid #e9e9e9;
        empty-cells: show;
        display: table;
        border-spacing: 0;
        border-collapse: collapse;

        width: 100%;

        font-family: Consolas, Menlo, Courier, monospace;
        font-size: 16px;

        tr {
            height: 60px;
        }

        tr:hover {
            background-color: #f6f8fa;
        }
    }
}

</style>
